<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<title>Meeting History (Beta)</title>
<r:require module="PlUpload" />
</head>
<body>
	<div class="container">
		<div class="data-grid-item">
			<div id="add-new-meeting" class="inner-data-grid-item">
				<p class="lead">ADD NEW MEETING</p>

				<div class="row">
					<div class="span5 pull-left"">
						<label>Meeting Video Submit Method</label> <select
							name="videoMeetingMethod" class="input-block-level">
							<option value="upload">Upload Meeting</option>
							<option value="record">Record Meeting (Experimental)</option>
						</select>
						<div id="video-section-wrapper">
							<div id="userMediaInfo" class="alert" style="display : none;"></div>
							<input type="file" accept="video/*;capture=camcorder" />
						</div>
					</div>
					<div class="span6 pull-right">
						<g:form name="meeting" action="addMeeting" controller="Meeting"
							method="GET">
							<label>Type Of Meeting</label>
							<select id="meeting-type" class="span6 select-block"
								name="meeting-type">
								<option value="Daily Meeting" selected="selected">Daily
									Meeting</option>
								<option value="Planning Meeting 1">Planning Meeting 1</option>
								<option value="Planning Meeting 2">Planning Meeting 2</option>
								<option value="Review Meeting">Review Meeting</option>
								<option value="Retrospective Meeting">Retrospective
									Meeting</option>
							</select>
							<label>Meeting Location</label>
							<select id="meeting-location" class="span6 select-block"
								name="meeting-location">
								<option value="Kanban" selected="selected">Kanban</option>
								<option value="Meeting Room">Meeting Room</option>
								<option value="Online Conference">Online Conference</option>
							</select>
							<label>Description</label>
							<textarea name="meeting-description" class="input-block-level"
								rows="5" cols="10" id="meeting-description"></textarea>
							<input id="meeting-submit" name="meeting-submit" type="submit"
								class="btn btn-info pull-right" value="Submit Meeting" />
						</g:form>

					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	jQuery(document).ready(function( $ ) {
		// Check if browser support getUserMedia API
		navigator.getMedia = (navigator.getUserMedia
				|| navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
				
		if(!navigator.getMedia) {
			$("#userMediaInfo").show().addClass("alert-error").html("Your browser doesn't support this function.");
		} else {
			$("#userMediaInfo").show().addClass("alert-info").html("Congratulation! Your browser is ready to go!");
		}
	});
	</script>
</body>
</html>